<script setup lang="ts">
import {onMounted, ref} from 'vue'
import {getRequest, postPutRequest} from "@/api/data.ts";
import {FormInst, useMessage} from 'naive-ui';

const message = useMessage()
//客服设置
const loadings = ref<boolean>(false);
const btnLoading = ref<boolean>(false);
const storageFileRef = ref<FormInst | null>(null);
const storageFileForm=ref({
  key:"tencent",
  enable: 0,
  value:{
    Bucket:'',
    SecretId:'',
    SecretKey:'',
    Region:'',
  }
})
const handelSave = (e: MouseEvent) => {
  e.preventDefault();
  storageFileRef.value?.validate((errors) => {
    if (!errors) {
      btnLoading.value = true;
      postPutRequest('conf/save_storage', storageFileForm.value).then((result: ResponseResult) => {
        if (result.code === 200) {
          message.success(result.message, {
            duration: 1500,
            onLeave() {
              btnLoading.value = false;
            }
          })
        } else {
          message.error(result.message);
          btnLoading.value = false;
        }
      })
    }
  })
}
//获取配置参数
const getSettings = async () => {
  await getRequest('conf/get_settings', {type: 'storage'}, true).then((result: ResponseResult) => {
    const {data} = result;
    const {storage} = JSON.parse(data);
    if (storage) {
      const data_key = Object.keys(storage)
      storageFileForm.value = {
        key: data_key[0] ?? 'tencent',
        enable: storage[data_key[0]]['enable'] ?? 0,
        value:{
          Bucket:storage[data_key[0]]['Bucket'] ?? '',
          SecretId:storage[data_key[0]]['SecretId'] ?? '',
          SecretKey:storage[data_key[0]]['SecretKey'] ?? '',
          Region:storage[data_key[0]]['Region'] ?? '',
        }
      }
    }
    loadings.value = false;
  })
}

onMounted(() => {
  loadings.value = true;
  getSettings();
})
</script>

<template>
  <n-form ref="storageFileRef" :model="storageFileForm"
          require-mark-placement="left"
          style="width: 480px;"
          label-placement="left" :label-width="100">
    <n-spin size="medium" v-model:show="loadings">
      <n-form-item label="是否启用" path="enable">
        <n-radio-group v-model:value="storageFileForm.enable">
          <n-radio :value="1" label="启用"/>
          <n-radio :value="0" label="停用"/>
        </n-radio-group>
      </n-form-item>
      <n-form-item label="存储空间" path="value.Bucket"
                   :rule="{required: true,message: '请填写存储空间',trigger: ['input', 'blur']}">
        <n-input v-model:value="storageFileForm.value.Bucket" placeholder="请填写存储空间(Bucket)" clearable/>
      </n-form-item>
      <n-form-item label="身份识别ID" path="value.SecretId"
                   :rule="{required: true,message: '请填写身份识别ID(SecretId)',trigger: ['input', 'blur']}">
        <n-input v-model:value="storageFileForm.value.SecretId" placeholder="请填写身份识别ID(SecretId)" clearable/>
      </n-form-item>
      <n-form-item label="身份密钥" path="value.SecretKey"
                   :rule="{required: true,message: '请填写身份密钥(SecretKey)',trigger: ['input', 'blur']}">
        <n-input v-model:value="storageFileForm.value.SecretKey" placeholder="请填写身份密钥(SecretKey)" clearable/>
      </n-form-item>
      <n-form-item label="地域信息" path="value.Region"
                   :rule="{required: true,message: '请填写地域信息 例如：ap-beijing、ap-hongkong 等',trigger: ['input', 'blur']}">
        <n-input v-model:value="storageFileForm.value.Region" placeholder="请填写地域信息 例如：ap-beijing、ap-hongkong 等" clearable/>
      </n-form-item>
      <n-form-item :span="8" label="&nbsp;" style="margin-top: 15px;">
        <n-button type="primary" :loading="btnLoading" @click="handelSave">保存腾讯COS设置</n-button>
      </n-form-item>
    </n-spin>
  </n-form>
</template>

<style scoped lang="scss">

</style>